<template>
  <div class="login_container" id="building">
    <el-card class="loginCard">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="验证码登录" name="first">
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputA" placeholder="请输入邮箱" />
                </div>
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputB" placeholder="请输入验证码">
                        <template #append>
                            <el-button @click="zxyD()">发送验证码</el-button>
                        </template>
                    </el-input>
                </div>
                <!-- <div style="margin-top:10px">
                    <el-checkbox v-model="checked1" label="我同意服务政策与隐私协议"></el-checkbox>
                </div> -->
                <div class="wellA">
                  <div style="margin-top:20px">
                      <el-button @click="zxyC()">注册/登录</el-button>
                  </div> 
                </div>             
            </el-tab-pane>
            <el-tab-pane label="密码登录" name="second">
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputC" placeholder="请输入邮箱或用户名" />
                </div>
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputD" placeholder="请输入密码" show-password />
                </div>
                <!-- <div style="margin-top:10px">
                    <el-checkbox v-model="checked1" label="我同意服务政策与隐私协议"></el-checkbox>
                </div> -->
                <div class="wellA">
                  <div style="margin-top:20px">
                      <el-button @click="zxyB()">登录</el-button>
                  </div> 
                </div>
                
            </el-tab-pane>
        </el-tabs>
        
        <div class="well" style="margin-top:20px">
            <el-link :underline="false" @click="gohome()">返回首页</el-link>
            <el-link :underline="false" @click="gotoFPWD()" style="float:right">找回密码</el-link>
        </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs} from 'vue'
import axios from "axios";
import qs from 'qs';
export default defineComponent({
  setup() {
    //const checked1 = ref(false)
    const state = reactive({
      inputA:'',
      inputB:'',
      inputC:'',
      inputD:'',
      
    });
    return {
      ...toRefs(state),
      //checked1
    };
  },
    data() {
    return {
      activeName: 'first',
    }
  },
  methods: {
    gohome(){
      this.$router.push("/");
    },
    gotoFPWD(){
      this.$router.push("/findpwd");
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    zxyB(){
      // if(this.checked1==false){
      //   this.$message.error("请先阅读服务政策与隐私协议");
      // }
      // else{
        let dataA={
            usernameORemail:this.inputC,
            password:this.inputD
        }
        let data=qs.stringify(dataA)
        axios.post("login/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==300){
            this.$store.commit("updateUserID", res.data.userID);
            this.$store.commit("updateUserName", res.data.username);
            this.$store.commit("updateUserEmail", res.data.email);
            this.$store.commit("updateown_door", res.data.hasPortal);
            this.$store.commit("updateMPID", res.data.portalID);
            this.$store.commit("updateIsCompany", res.data.is_company);
            this.$store.commit("updateIsLogin", true);
              this.$message({ message: '登录成功', type: 'success' });
              this.$router.push("/");
              // if(window.history.length<=1){
              //   this.$router.push("/");
              // }
              // else{
              //   this.$router.go(-1)
              // }
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
      //}
    },
    zxyD(){
      let dataA={
            email:this.inputA,
            authCode:'sendCode'
        }
        let data=qs.stringify(dataA)
        axios.post("register/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==200){
              this.$message({ message: '发送验证码成功', type: 'success' });
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
    },
    zxyC(){
      // if(this.checked1==false){
      //   this.$message.error("请先阅读服务政策与隐私协议");
      // }
      // else{
        let dataA={
            email:this.inputA,
            authCode:this.inputB
        }
        let data=qs.stringify(dataA)
        axios.post("register/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==300||res.data.code==200){
            if(res.data.code==300)
            {
              this.$store.commit("updateUserID", res.data.userID);
              this.$store.commit("updateUserName", res.data.username);
              this.$store.commit("updateUserEmail", this.inputA);
              this.$store.commit("updateown_door", res.data.hasPortal);
              this.$store.commit("updateMPID", res.data.portalID);
              this.$store.commit("updateIsCompany", res.data.is_company);
              this.$store.commit("updateIsLogin", true);
              this.$message({ message: '登录成功', type: 'success' });
              this.$router.push("/");
              // if(window.history.length<=1){
              //   this.$router.push("/");
              // }
              // else{
              //   this.$router.go(-1)
              // }
            }
            else
            {
              this.$store.commit("updateUserID", res.data.userID);
              this.$store.commit("updateUserName", res.data.name);
              this.$store.commit("updateUserEmail", this.inputA);
              var a=false;
              var b='None';
              this.$store.commit("updateown_door", a);
              this.$store.commit("updateMPID", b);
              this.$store.commit("updateIsLogin", true);
              this.$message({ message: '注册成功', type: 'success' });
              this.$router.push("/setpwd");
            }   
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
      //}
    }
  },
})
</script>

<style scoped>
#building {
  background: url("../assets/zxyB.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.login_container {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  /*background-image: url("../images/bg_login.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.loginCard {
  width: 340px;
  height:360px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>